
<template>
    <div>
        <h3 style="color: rgb(66, 155, 255) !important;" >基本信息</h3>
    </div>
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
    <el-row>
    <el-col :span="8"><div class="grid-content ep-bg-purple" />
      <el-form-item label="姓名：" prop="name" style=" width: 300px;" >
        <el-input v-model="ruleForm.name" />
      </el-form-item></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple-light" />
      <el-form-item label="性别：" prop="region">
        <el-select v-model="ruleForm.region" placeholder="性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" />
      <el-form-item label="身高：" prop="name"  style=" width: 300px;">
        <el-input v-model="ruleForm.aa" />
      </el-form-item></el-col>
  </el-row>
  <el-row>
    <el-col :span="8"><div class="grid-content ep-bg-purple" />
      <el-form-item label="体重" prop="name"  style=" width: 300px;">
        <el-input v-model="ruleForm.bb" />
      </el-form-item></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple-light" />
      <el-form-item label="体重" prop="name"  style=" width: 300px;">
        <el-input v-model="ruleForm.cc" />
      </el-form-item>
    </el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" />
      <el-form-item label="血型：" prop="region">
        <el-select v-model="ruleForm.blood " placeholder="血型">
          <el-option label="AB "   />
          <el-option label="A" />
          <el-option label="B"  />
          <el-option label="C"  />
          <el-option label="O"  />
        </el-select>
      </el-form-item></el-col>
  </el-row>
  <el-row>
    <el-col :span="6"><div class="grid-content ep-bg-purple" />
      <el-form-item label="左耳听力：" prop="region">
        <el-select v-model="ruleForm.earr" placeholder="左耳听力">
          <el-option label="正常" value="正常" />
          <el-option label="耳聋" value="耳聋" />
        </el-select>
      </el-form-item></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" />
      <el-form-item label="右耳听力：" prop="region">
        <el-select v-model="ruleForm.ear" placeholder="左耳听力">
          <el-option label="正常" value="正常" />
          <el-option label="耳聋" value="耳聋" />
        </el-select>
      </el-form-item></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" />
      <el-form-item label="左眼视力：" prop="name" style=" width: 300px;" >
        <el-input v-model="ruleForm.dd" />
      </el-form-item></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" />
      <el-form-item label="右眼视力：" prop="name" style=" width: 300px;" >
        <el-input v-model="ruleForm.ff" />
      </el-form-item></el-col>
  </el-row>
  <el-row>
    <el-col :span="8"><div class="grid-content ep-bg-purple" />
      <el-form-item label="电话：" prop="name" style=" width: 300px;" >
        <el-input v-model="ruleForm.gg" />
      </el-form-item></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple-light" />
      <el-form-item label="身份证号" prop="name" style=" width: 300px;" >
        <el-input v-model="ruleForm.ee" />
      </el-form-item></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" />
      <el-form-item label="住址：" prop="name" style=" width: 300px;" >
        <el-input v-model="ruleForm.rr" />
      </el-form-item></el-col>
  </el-row>
  <el-row>
    <el-col :span="8"><div class="grid-content ep-bg-purple" />
      <el-form-item label="紧急联系人：" prop="name" style=" width: 300px;" >
        <el-input v-model="ruleForm.tt" />
      </el-form-item></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple-light" />
      <el-form-item label="联系电话：" prop="name" style=" width: 300px;" >
        <el-input v-model="ruleForm.yy "/>
      </el-form-item></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" />
      <el-form-item label="关系：" prop="region">
        <el-select v-model="ruleForm.relationship" >
          <el-option label="爸爸" value="爸爸" />
          <el-option label="妈妈" value="妈妈" />
          <el-option label="儿子" value="儿子" />
          <el-option label="女儿" value="女儿" />
          <el-option label="亲戚"  value="亲戚"/>
          <el-option label="朋友"  value="朋友"/>
        </el-select>
      </el-form-item></el-col>
  </el-row>
      
      <el-form-item label="生日：" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker
              v-model="ruleForm.date1"
              type="date"
              label="Pick a date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="2">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker
              v-model="ruleForm.date2"
              label="Pick a time"
              placeholder="Pick a time"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
    <h3 style="color: rgb(66, 155, 255) !important;">过敏史</h3>
    <el-input
    v-model="ruleForm.guomin"
    maxlength="30"
    show-word-limit
    type="textarea"
  />
  <h3 style="color: rgb(66, 155, 255) !important;">个人史</h3>
    <el-input
    v-model="ruleForm.geren"
    maxlength="30"
    show-word-limit
    type="textarea"
  />
  <h3 style="color: rgb(66, 155, 255) !important;">家族史</h3>
    <el-input
    v-model="ruleForm.jiazu"
    maxlength="30"
    show-word-limit
    type="textarea"
  />
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  
  const formSize = ref('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    name: '',
    aa:'',
    bb:'',
    cc:'',
    dd:'',
    ff:'',
    gg:'',
    ee:'',
    rr:'',
    tt:'',
    yy:'',
    blood :'',
    earr:'',
    guomin:'',
    geren:'',
    jiazu:'',
    ear:'',
    relationship:'',
    region: '',
    count: '',
    date1: '',
    date2: '',
    // delivery: false,
    type: [],
    resource: '',
    desc: '',
    numr:''
   
  })
  
  // const rules = reactive<FormRules>({
  //   name: [
  //     { required: true, message: 'Please input Activity name', trigger: 'blur' },
  //     { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  //   ],
  //   region: [
  //     {
  //       required: true,
  //       message: 'Please select Activity zone',
  //       trigger: 'change',
  //     },
  //   ],
  //   count: [
  //     {
  //       required: true,
  //       message: 'Please select Activity count',
  //       trigger: 'change',
  //     },
  //   ],
  //   date1: [
  //     {
  //       type: 'date',
  //       required: true,
  //       message: 'Please pick a date',
  //       trigger: 'change',
  //     },
  //   ],
  //   date2: [
  //     {
  //       type: 'date',
  //       required: true,
  //       message: 'Please pick a time',
  //       trigger: 'change',
  //     },
  //   ],
  //   type: [
  //     {
  //       type: 'array',
  //       required: true,
  //       message: 'Please select at least one activity type',
  //       trigger: 'change',
  //     },
  //   ],
  //   resource: [
  //     {
  //       required: true,
  //       message: 'Please select activity resource',
  //       trigger: 'change',
  //     },
  //   ],
  //   desc: [
  //     { required: true, message: 'Please input activity form', trigger: 'blur' },
  //   ],
  // })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  </script>

<style lang="scss" scoped>

</style>